<template>
  <div  :class="['area-select', isEdit && 'edit-area']">
    <el-cascader v-model="val" :props="props" :disabled="isEdit"
        :placeholder="placeholder"
        @change="expandChange">
    </el-cascader>
  </div>
</template>
<script>
import {getAreaList} from '@/api/common/index.js'
export default {
  name: "area-select",
  inheritAttrs: true,
  props: {
    level: {
      type: Array,
      default: ["provinceCode", "cityCode", "areaCode", "streetCode"]
    },
    value: [String, Number],
    placeholder: [ String ],
    isEdit: {
        type: Boolean,
        default: false
    }
  },
  data(){
    const vm = this
    return {
        val: '',
        props: {
            lazy: true,
            emitPath: false,
            lazyLoad: (node, resolve) => {
                vm.getCascaderData(node, resolve)
            }
        }
    }
  },
  mounted(){
    
  },
  methods: {
    getCascaderData(node, resolve){
        let _self = this, {level, value} = node, nodes = []
        if(level == _self.level.length) return resolve()
        getAreaList({keywords: value, level: level + 1}).then(
            res => {
            res.data.forEach(area => {
                nodes.push({
                value: area.id,
                label: area.name,
                leaf: level >= (_self.level.length -1)
                })
            })
            resolve(nodes);
          }
        )
    },
    expandChange(num){
        let _self = this
        _self.$emit('input', num)
        _self.$emit('area-change', {acode: num, level: 'district'})
    }
  },
};
</script>
<style lang="scss" scoped>
.area-select ::v-deep{
  .el-cascader{
    width: 100%;
  }
}
.edit-area ::v-deep{
  .el-input__inner::placeholder{
    color: #333
  }
}
</style>